<template>
    <div class="goods_cate">
      <category-List ref="cateGory" style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee;"></category-List>

      <!-- <div class="title wrapper_1200">
        <nuxt-link class="home" to="/">{{$t('page.goodsDetail.home')}}  </nuxt-link>
        <span v-for="(item, index) in titleName" class="cate_name" @click="goCate(item,index)"> > {{ item.split('_')[0] }}</span> <span v-if="searchVal"> > {{searchVal}} </span>
         <div v-if="is_multiple && search" class="search-count acea-row"><span class="search-title">{{$t('page.index.brand')}}：</span> <span class="search-selected">{{search}}</span>
           <span class="el-icon-close" @click="handleClose"></span>
         </div>
      </div> -->
      <div class="search-store acea-row" v-if="storeList.length > 0 && type == 'shop'">
           <div
             class="RecommendedStores"
             v-for="(item, index) in storeList"
             :key="index"
             @click="goDetail(item)"
             style="
               width: 340px;
               border: 1px solid #eeeeee;
               border-radius: 5px;
               padding: 10px;
               margin-right: 90px;
               margin-top: 40px;
                cursor: pointer;
             "
           >
             <div style="display: flex">
               <div>
                 <img
                   :src="
                     item.recommend && item.recommend.length
                       ? item.recommend[0].image
                       : item.mer_avatar
                   "
                   alt=""
                   style="width: 70px; height: 70px; border-radius: 50%"
                 />
               </div>
               <div style="margin-left: 15px">
                 <div style="width: 100px;text-overflow: ellipsis; white-space: nowrap;">
                    <p>{{ item.mer_name }}</p>
                 </div>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                   商品:72
                 </p>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                   销量:380,315
                 </p>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                   好评:93%
                 </p>
               </div>
               <div
                 style="
                   border: 1px solid #f89900;
                   backgroound-color: #fcf2e2;
                   width: 130px;
                   height: 26px;
                   line-height: 25px;
                   text-align: center;
                   border-radius: 13px;
                   margin-left: 20px;
                   margin-top: 50px;
                 "
               >
                 <span style="color: #f89900; font-size: 13px"
                   >访问商店{{ ">" }}</span
                 >
               </div>
             </div>
           </div>

           <!-- <ul class="store-count" :class="storeList.length >= 2 ? 'moreStore' : ''">
                <li class="item acea-row" v-for="(item, index) in storeList" :key="index">
                    <div class="store-name acea-row">
                        <div class="image">
                            <img :src="item.mer_avatar" alt="">
                        </div>
                        <div class="name">
                            {{ item.mer_name }}
                            <span>{{ item.care_count < 10000 ? item.care_count : (item.care_count/10000).toFixed(1)+ $t('page.index.tenthousand') || 0 }}{{$t('page.store.people')}}</span>
                        </div>
                    </div>
                    <div class="store-go acea-row">
                        <button class="store-btn goIn" @click="goStore(item.mer_id)">{{$t('page.goodsDetail.goshopping')}}</button>
                      <button v-if="item.isCollect" class="store-btn collect hasCollect">已收藏</button>
                          <button v-else class="store-btn collect">未收藏</button>
                    </div>
                </li>
            </ul>
            <nuxt-link v-if="storeLength" :to="{path:'/shop_street',query:{title:searchVal}}" class="moreBtn">
                m<br/>o<br/>r<br/>e
                <span class="iconfont icon-you"></span>
            </nuxt-link> -->
      </div>
      <div v-if="type == 'shop'" id="" style="height: 150px;"></div>
      <!-- <div class="nav" :class="is_showMore ? 'showMore' : ''">
        <div class="navCon wrapper_1200 acea-row">
            <div class="name">{{$t('page.index.brand')}}：</div>
            <div class="list brandList" v-if="is_multiple">
                <el-checkbox-group v-model="checkedBrands">
                  <template v-for="(item, index) in brandList">
                    <el-checkbox :label="item.brand_id" :key="index" v-if="item.brand_id">{{item.brand_name}}</el-checkbox>
                  </template>
                </el-checkbox-group>
                <div slot="footer" class="select-footer">
                    <el-button type="primary" @click.native="bind<strong>Submit</strong>" size="mini">{{$t('page.goodsDetail.confirm')}}</el-button>
                    <el-button @click="handleClose" size="mini">{{$t('page.goodsDetail.cancel')}}</el-button>
                </div>
            </div>
            <div class="list acea-row row-middle" v-if="!is_multiple">
                 <div class="item" :class="current===index?'font-color':''" v-for="(item, index) in brandList" :key="index" @click="category(index)">{{item.brand_name}}</div>
            </div>
            <div class="moreCon">
                <div class="more">
                    <span class="multiBtn" @click="toggleMultiple">{{ is_multiple ? $t('page.index.radio') : $t('page.index.choice') }}</span>
                </div>
            </div>
        </div>
      </div> -->
      <div v-if="type !== 'shop'" class="wrapper sort-count" style="display: flex; justify-content: start;">

         <div class="" style="margin-left: 50px;">
            <!-- 排序· -->
            <div class="" style="">
              <div class="sort acea-row">
                <div class="name">{{$t('page.goodsSearch.sort')}}：</div>
                <div class="acea-row">
                  <div class="item" :class="iSdefaults === 0?'font-color':''" @click="defaults">{{$t('page.goodsSearch.Default')}}</div>
                  <div class="item" :class="iSdefaults === 1?'font-color':''" @click="salesSort('sales')">
                    {{$t('page.goodsDetail.sales')}}
                  </div>
                  <div class="item" :class="iSdefaults === 3?'font-color':''" @click="salesRate('rate')">
                    {{$t('page.users.goodsCommentList.score')}}

                  </div>
                  <div class="item" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_desc')" v-if="priceOrder === 'price_asc'">
                    {{$t('page.goodsList.price')}}
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-jiageshaixuanshang"></use>
                    </svg>
                  </div>
                  <div class="item" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_asc')" v-else-if="priceOrder === ''">
                    {{$t('page.goodsList.price')}}
                    <span class="iconfont icon-jiageshaixuan"></span>
                  </div>
                  <div class="item" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_asc')" v-else>
                    {{$t('page.goodsList.price')}}
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-jiageshaixuanxia"></use>
                    </svg>
                  </div>
                  <!-- <div class="item price-range">
                      <div class="price-count">
                          <el-input class="input" v-model.number="price_on" @input="change($event)"></el-input> -
                          <el-input class="input" v-model.number="price_off" @input="change($event)"></el-input>
                      </div>
                      <div class="action-box">
                          <span class="action-btn clear" @click="clearPrice">{{$t('page.goodsDetail.clear')}}</span>
                          <span class="action-btn submit" @click="getProductslist('')">{{$t('page.goodsDetail.confirm')}}</span>
                      </div>
                  </div> -->
                </div>
              </div>
            </div>
            <!-- 商品 -->
            <div class="" style="margin-top: 30px;">
             <!-- <div v-if="productslist.length = 0">暂无商品</div> -->
              <div>
                <div class="goods acea-row row-middle">
                  <div class="item" v-for="(item, index) in productslist" :key="index" @click="goDetail(item)"   style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;">
                    <div class="pictrue"><img :src="item.image"></div>
                    <div class="money acea-row row-between-wrapper">
                      <div><span class="font-color" style="font-size: 15px;">${{item.price}}</span></div>
                      <div class="label font-color" v-if="item.issetCoupon">券</div>
                    </div>
                    <div style="margin-top: 5px">
                      <span style="color: #999999; font-size: 13px">{{$t('page.index.Sold') + item.sales}}</span>
                    </div>
                    <div class="name line1" style="line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;"> <span v-if="item.merchant.is_trader && item.product_type == 0" class="trader">{{$t('page.store.selfSupport')}}</span><span v-else-if="item.product_type == 1" class="trader">{{$t('page.index.spike')}}</span> {{item.store_name}}</div>
                    <div class="stock" style="margin-bottom: 25px;display: flex; justify-content: space-between;">
                      <div>
                        <i class="el-icon-shopping-cart-full" style="margin-right: 8px;font-weight: 600;color: #424542;"></i>
                        <span style="color: #000; font-weight: 600;
                        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif!important;">
                        {{$t('page.index.PurchaseNow')}}
                        </span>
                      </div>
                      <div>
                        <i class="el-icon-star-off" style="font-size: 14px; color: #000;"></i>
                      </div>
                    </div>
                    <!-- <div class="bottom acea-row row-between-wrapper">
                      <div>{{item.sales}}{{$t('page.index.Peoplepay')}}</div>
                      <div>{{item.rate}}</div>
                    </div> -->
                  </div>
                </div>
                <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="total" :pageSize="limit" @current-change="bindPageCur"></el-pagination>
              </div>
            </div>
         </div>
      </div>



<!--      <div v-if="!productslist.length">
        <div class="noGoods">
          <div class="pictrue">
            <img src="../assets/images/noGoods.png">
          </div>
          <div class="name">{{$t('page.goodsList.empty')}}</div>
        </div>
      </div> -->
    </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import categoryList from "@/components/categoryList";
export default {
      name: "goods_cate",
      auth: false,
      components: {
        categoryList
      },
      data(){
        return {
          triggerindex:-1,
          trigger:false,
          isDanger:false, //字体颜色
          changeIcon:false, //判断图表
          currer:-1, //一级商品下标
          ProductLevel:[], //商品二级
          current: -1,
          categoryLists: [],
          isCollect: false,
          storeList: [],
          brandList:[],
          brandCurrent:[],
          current:0,
          moreCurrent:0,
          seen:false,
          titleName:'',
          erCurrent:0,
          iSdefaults:0,
          productslist:[],
          pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
          page: 1, //代表页面的初始页数
          limit:15,
          scollY: null,// 离底部距离有多少
          total: 0, //总页数
          title:this.$t('page.index.Dropdowntoloadmore'),
          cid:0,//一级分类
          sid:'',//二级分类
          order: '',
          priceOrder: '',
          price_on: '',
          price_off: '',
          news:0,
          is_multiple: false,
          checkedBrands: [],
          is_showMore: true,
          searchVal: '',
          search: '',
          storeLength: false,
          type:'',
        }
      },
      async asyncData({app,query}){
        console.log('query',query)
        return {
          keyword: query.title ? query.title : '',
          isshow:query.inshow,
          isDanger:true,
          type:query.type,
          currer:query.index,
          sid: query.sid ? query.sid:'',
          titleName: query.name ? decodeURI(query.name).split(',') : '',
        }
      },
      watch:{
        $route: {
            handler: function(newVal, oldVal){
                this.keyword = newVal.query.title ? newVal.query.title : '';
                this.searchVal = newVal.query.title ? newVal.query.title : '';
                this.sid = newVal.query.sid ? newVal.query.sid : '';
                this.titleName = newVal.query.name ? decodeURI(newVal.query.name).split(',') : '';
                this.page = 1;
                this.getStoreList();
                this.getProductslist(1);
                this.getBrandList();
            },
            // 深度观察监听
            deep: true
        },
        is_multiple(n){
          this.checkedBrands = [];
          if(!n) {
            this.current = 0;
          }
        },
      },
      fetch({ store}) {
        store.commit("isBanner", false);
        store.commit('isHeader', true);
        store.commit('isFooter', true);
      },
      head() {
        return {
          title: this.$t('page.index.Categories') +"-"+this.$store.state.titleCon
        }
      },
      created() {

      },
      beforeMount(){
        this.searchVal = this.$route.query.title;
        this.type = this.$route.query.type;
        console.log('this.type',this.type)
        this.sid = this.$route.query.sid || '';
        this.getProductslist('');
        if(this.keyword) this.getStoreList();
        this.getBrandList();
        this.getCategoryList();
      },
      mounted(){},
      beforeDestroy() {},
      methods:{
        getCategoryList(){
            this.$axios.get("/api/store/product/category/lst").then(res=>{
                this.categoryLists = res.data.list;
                this.categoryLists.forEach(function(value,index){
                  value.isshows = false
                })
            })
        },
        bindSubmit(){
            this.getSelectedItem();
            this.getProductslist(1);
            this.getStoreList();
            this.getBrandList();
        },
        handleClose(){
            this.checkedBrands = [];
            this.searchVal = this.search = "";
            this.toggleMultiple();
            this.getProductslist(1);
            this.getStoreList();
            this.getBrandList();
        },
        toggleMultiple(){
          this.is_multiple = !this.is_multiple
          if(!this.is_multiple) this.search = ''
        },
        clearPrice(){
            this.price_on = this.price_off = "";
        },
        change(e){
            this.$forceUpdate()
        },
        /**获取品牌*/
        getBrandList(){
          let _this = this;
          _this.$axios.get('/api/store/product/brand/lst',{
            params:{
              limit: 999,
              keyword: _this.keyword,
              pid: _this.sid
            }
          }).then( (res) => {
            console.log('res123456789',res)
            _this.brandList = res.data.list
            _this.brandList.unshift({
              'brand_id': '',
              'brand_name': this.$t('page.users.goodsCommentList.all')
            })
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        Allproducts(){
          this.keyword = ''
          this.sid = ''
          this.getProductslist(1)
           this.isDanger = true
           this.currer = -1
        },
        goCateOne(item,index){
          this.keyword = item.cate_name
          this.sid = item.pid
          this.trigger = true
          this.triggerindex = index
          this.getProductslist(1)
        },
        goCate(item, index) {
          console.log('item',item)
          this.trigger = false
          this.keyword = item.cate_name
          this.sid = item.pid
          this.isDanger = true
            this.currer = index
          this.getProductslist(1)
          this.categoryLists.forEach(function(value,index){
            if(item.cate_name == value.cate_name){
              value.isshows = !value.isshows
            }else{
              value.isshows = false
            }
          })
          if(item.children.length>0){
            this.ProductLevel = item.children
            if(item.isshows == false){
             this.ProductLevel = []
            }
          }
          // if((index + 1) === this.titleName.length){
          //   return ;
          // }
          // const name = this.titleName.reduce((initial, val, idx) => {
          //   if (idx > index) {
          //     return initial;
          //   } else {
          //     initial.push(val);
          //     return initial;
          //   }
          // }, []);
          // this.$router.push({
          //   path: `/goods_cate`,
          //   query: {
          //     sid: item.split('_')[1],
          //     name: encodeURI(name.join(',')),
          //     // name: encodeURI(name.substring(0,name.length-1))
          //   }
          // })
        },
        /**取出多选选中的项 */
        getSelectedItem(){
            if(this.checkedBrands.length > 0){
                this.search = '';
                for(var i=0;i<this.checkedBrands.length;i++){
                    for(var j=0;j<this.brandList.length;j++){
                        if(this.checkedBrands[i] == this.brandList[j]['brand_id']){
                            this.search += this.brandList[j]['brand_name']+',';
                            this.search =  this.subStr(this.search,10)
                        }
                    }
                }
                this.search = this.search.substr(0, this.search.length - 1);
            }
        },
        /**超出省略号代替 */
        subStr(str,max){
            if(str.length > max){
                str = str.substring(0,max) + '...';
            }
             return str;
        },
        goDetail: function (item) {
          if(item.product_type == 1){
            this.$router.push({ path: '/goods_seckill_detail/'+item.product_id,query: { time: item.stop_time,status: item.seckill_status } });
          }else{
            this.$router.push({ path: '/goods_detail/'+item.product_id });
          }
        },
        /**进店逛逛 */
        goStore: function(id){
            this.$router.push({ path: `/store?id=${id}` });
        },
        /**店铺列表 */
        getStoreList(){
            let _this = this;

            if(!_this.keyword){
              _this.storeList = [];
              _this.storeLength = 0;
              return ;
            }

            _this.$axios.get('/api/store/merchant/lst',{
              params:{
                 keyword: _this.keyword ? _this.keyword  : '',
                 limit: 3
              }
            }).then(function (res) {
            _this.storeList = res.data.list;
            _this.storeLength = res.data.list.length > 2 ? true : false;
            if(_this.storeLength)_this.storeList.length = 2;
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        getProductslist(num){
          let _this = this;
          _this.page = num ? num : _this.page;
          let  currentPage = {page: _this.page,limit:_this.limit,keyword: _this.keyword,brand_id: _this.checkedBrands.toString(),
            price_on: _this.price_on, price_off: _this.price_off, order: _this.order, cate_pid: _this.sid, common: 1
          };
          console.log('currentPage',currentPage)

          _this.$axios.get('/api/product/spu/lst', {
            params: currentPage
          }).then(function (res) {
             console.log('res000000',res)
            //console.log(res.data.list);

            _this.total = res.data.count;
            _this.productslist = res.data.list;
          }).catch(function (err) {
            _this.$message.error(err);
          })

        },
        // 分页点击
        bindPageCur(data){
            this.page = data
            this.getProductslist('');
        },
        category(index){
          this.checkedBrands = [];
          this.current = index;
          this.moreCurrent = index;
          this.brandCurrent = this.brandList[index].children;
          this.productslist = [];
          this.page = 1;
          this.erCurrent = 0;
          this.order = '';
          this.checkedBrands[0] = this.brandList[index]['brand_id'];
          this.getProductslist('');
        },
        defaults(){
          this.iSdefaults = 0;
          this.productslist = [];
          this.page = 1;
          this.order = '';
          this.priceOrder = '';
          this.getProductslist('');
        },
        priceSort(sort){
          this.iSdefaults = 2;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = sort;
          this.getProductslist('');
        },
        salesSort(sort){
          this.iSdefaults = 1;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = '';
          this.getProductslist('');
        },
        salesRate(rate){
          this.iSdefaults = 3;
          this.productslist = [];
          this.page = 1;
          this.order = rate;
          this.priceOrder = '';
          this.getProductslist('');
        }
      }
    }
</script>

<style scoped lang="scss">
  // 二级商品
  .Secondaryproducts{
    &:hover{
      color: #f89900 !important;
    }
  }
  // 分类左侧样式
  .classification{
    .titles{
      padding: 20px 0;
      font-size:16px;
      border-bottom: 1px solid #eee;
      color: #333333;
      font-weight: 600;
    }
    //全部商品
    .products{
     padding: 15px 0;
     width: 100%;
     // margin-top:15px;
     &:hover{
       border-right: 2px solid #f89900;
     }
    }
    // 每个商品
    .Eachproduct {
      &:hover{
        border-right: 2px solid #f89900;
      }
    }
  }
  // 分页
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #f89900 !important;
  }
  .stock {
    color: #969696;
    font-size: 12px;
    margin-top: 14px;
  }
  .trader{
    color: #fff;
    background-color: #e93323;
    display: inline-block;

    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 12px;
  }
  .cate_name{
    cursor: pointer;
    &.on{
      color: #E93323
    }
  }
  .goods_cate{
    margin-top: 2px;
    .noGoods{
      text-align: center;
      .pictrue{
        width: 274px;
        height: 174px;
        margin: 130px auto 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: 14px;
        color: #969696;
        margin-top: 20px;
        margin-bottom: 290px;
      }
    }
    .nav{
      width: 100%;
      height: 50px;
      &.showMore{
          height: auto;
          .list{
              height: auto;
          }
      }
      cursor: pointer;
      .navCon{
        padding: 0 17px;
        position: relative;
        &:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 1140px;
            border-bottom: 1px dotted #EFEFEF;
            bottom: 0;
            left: 60px;
        }
        &.wrapper_1200{
          overflow: unset!important;
          background-color: #fff;
        }
        height: 100%;
        .name{
            color: #969696;
            margin-right: 20px;
            line-height: 50px;
        }
        .moreCon{
          position: relative;
          height: 50px;
          .moreCategory{
            padding: 44px 44px 16px 44px;
            position: absolute;
            top:50px;
            right: -17px;
            width: 1200px;
            background-color: #fff;
            box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
            .item{
              margin: 0 40px 28px 0;
              &:hover{
                color: #E93323;
              }
            }
          }
          .multiBtn{
              display: inline-block;
              width: 38px;
              height: 18px;
              line-height: 18px;
              border: 1px solid #C8C8C8;
              text-align: center;
              border-radius: 2px;
              margin-right: 18px;
          }
        }
        .list{
          height: 100%;
          width: 1020px;
          overflow: hidden;
          margin-right: 10px;
          .item{
            line-height: 50px;
            overflow: hidden;
            margin-right: 40px;

            &:hover{
              color: #E93323;
            }
          }
        }
        .more{
          position: relative;
          line-height: 50px;
          text-align: center;
          .iconfont{
            margin-left: 6px;
            font-size: 12px;
            color: #666666;
            display: inline-block;
            transition: all .1s ease;
            &.shouqi{
                 -moz-transform: rotateX(180deg);
                 -o-transform: rotateX(180deg);
                 -ms-transform: rotateX(180deg);
                 transform: rotateX(180deg);
            }
          }
        }
      }
    }
    .el-checkbox{
        height: 50px;
        line-height: 50px;
        color: #282828;
    }
    .title{
      color: #999999;
      height: 46px;
      line-height: 46px;
      .home{
        color: #282828;
      }
    }
    .sort-count{
        width: 1200px;
        margin: 0 auto;
    }
    .wrapper{
      background-color: #fff;
      padding: 25px 17px;
      cursor: pointer;
      .list{
        width: 1100px;
        border-bottom: 1px dotted #EFEFEF;
        padding-bottom: 10px;
        .item{
          margin-right: 30px;
          margin-bottom: 10px;
          &:hover{
            color: #E93323;
          }
        }
      }

      .sort{
        .item{
          margin-right: 30px;
          &:hover{
            color: #E93323;
          }
          .icon{
            font-size: 15px;
            margin-left: 5px;
          }
          .iconfont{
            font-size: 15px;
            color: #E2E2E2;
            margin-left: 5px;
          }
        }
        .name{
            color: #969696;
            margin-right: 20px;
        }
      }
    }
    .goods{
      width: 1220px;
      .item{
        width: 195px;
        height: 360px;
        background-color: #fff;
        padding: 16px 16px 16px 16px;
        cursor: pointer;
        transform: scale(1);
        transition: all 1s;
        margin-right: 15px;
        margin-bottom: 20px;
        &:hover {
          transform: scale(1.1);
          transition: all 1s;
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
          border: 1px solid #f9ad33 !important;
        }
        .pictrue{
          // width: 192px;
          height: 192px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .money{
          margin-top: 12px;
          .font-color{
            font-weight: bold;
            font-size: 22px;
          }
          .y_money{
            font-size: 12px;
            color: #AAAAAA;
            text-decoration: line-through;
            margin-left: 8px;
          }
          .label{
            width: 20px;
            height: 20px;
            background: linear-gradient(330deg, rgba(231, 85, 67, 0.15) 0%, rgba(244, 103, 83, 0.15) 100%);
            font-size: 12px;
            text-align: center;
            line-height: 20px;
          }
        }
        .name{
          color: #5A5A5A;
          margin-top: 8px;
          // height: 75px;
        }
        .bottom{
          font-size: 12px;
          color: #AAAAAA;
          margin-top: 10px;
        }
      }
    }
    .price-range{
        position: relative;
        top: -15px;
        padding: 10px;
        &:hover{
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            .action-box{
                display: block;
            }
        }
        .action-box{
            display: none;
            position: absolute;
            left: 0;
            bottom: -50px;
            text-align: center;
            background: #F9F9F9;
            height: 50px;
            line-height: 50px;
            width: 100%;
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            padding: 0 15px;
            overflow: hidden;
            .clear{
                float: left;
                color: #999999;
            }
            .submit{
                float: right;
                color: #666666;
                width: 60px;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                background-color: #F1F1F1;
                border-radius: 2px;
                border: 1px solid #D4D4D4;
            }

        }
        .price-count{
            .input{
                width: 80px;
                height: 32px;
                position: relative;

                    &:before{
                        content: '$';
                        display: inline-block;
                        color: #D4D4D4;
                        position: absolute;
                        left: 5px;
                        top: 0;
                        line-height: 32px;
                    }
                /deep/ .el-input__inner{
                    height: 32px;
                    line-height: 32px;
                    padding-left: 18px;
                }
            }
        }
    }
    .search-count{
        display: inline-block;
        background-color: #fff;
        height: 26px;
        line-height: 26px;
        color: #282828;
        padding: 0 10px;
        margin-bottom: 15px;
        .search-selected{
            display: inline-block;
            min-width: 100px;
            max-width: 200px;
            /deep/ .el-input__inner{
                border: none;
                height: 26px;
                line-height: 26px;
                color: #969696;
            }
        }
        .el-icon-close{
            cursor: pointer;
            color: #969696;
            font-size: 12px;
        }
    }
  }
  .search-store{
      width: 1200px;
      margin: 0 auto 20px;
      border-radius: 4px;
      overflow: hidden;
      .moreBtn{
        width: 32px;
        height: 76px;
        padding: 10px 0;
        background-color: #fff;
        color: #999999;
        text-align: center;
        font-size: 12px;
        float: left;
            .iconfont{
                display: block;
                font-size: 8px;
                border: 1px solid #8B8B8B;
                border-radius: 100%;
                width: 11px;
                height: 11px;
                line-height: 11px;
                text-align: center;
                margin: 3px auto 0;
            }
        }
      .store-count{
          overflow: hidden;
          width: 100%;
          .item{
              height: 96px;
              width: 100%;
              -webkit-justify-content: space-between;
              justify-content: space-between;
              padding: 0 17px;
              background-color: #fff;
          }
          &.moreStore{
               float: left;
               width: auto;
              .item{
                width: 570px;
                float: left;
                margin-right: 14px;
              }
          }
          .store-name{
              align-items: center;
              .image{
                width: 61px;
                height: 61px;
                border-radius: 100%;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .name{
                margin-left: 15px;
                color: #282828;
                line-height: 26px;
                >span{
                    display: block;
                    color: #999999;
                }
            }
          }
          .store-go{
              align-items: center;
              .store-btn{
                  width: 78px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 12px;
                  &.goIn{
                      color: #fff;
                      background-color: #E93323;
                      margin-right: 12px;
                      border: 1px solid #E93323;
                  }
                  &.collect{
                     color: #E93323;
                     border: 1px solid #E93323;
                     background-color: #fff;
                  }
                  &.hasCollect{
                      color: #999999;
                      border-color: #999999;
                  }
              }
          }

      }
  }
  .select-footer{
      text-align: center;
      margin: 30px 0;
  }
</style>
